const staff_client_index = {
    template:`
<div>
                        <div class="d-flex justify-content-between flex-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                            <h1 class="h2">Client List</h1>
                            <div class="btn-toolbar mb-2 mb-md-0">
                                <div class="btn-group mr-2">
                                    <router-link :to="{name:'staff.client.create'}" class="btn btn-sm btn-outline-primary">Create new client</router-link>
                                </div>
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-3 mb-3" v-for="(item,index) in clients" :key="index">
                                <div class="card px-4 py-2">
                                    <div class="d-flex justify-content-between align-items-start">
                                        <span class="card-title h3">{{item.corporate_name}}</span>
                                        <button class="btn btn-outline-danger btn-sm py-0" @click="delete_client(item)">Delete</button>
                                    </div>
                                    <div>
                                        <img src="./assets/images/user.png" class="icon">
                                        <span>{{item.firstanem}} {{item.lastname}}</span>
                                    </div>
                                    <div>
                                        <img src="./assets/images/telephone.png" class="icon">
                                        <span>{{item.phone}}</span>
                                    </div>
                                    <div>
                                        <img src="./assets/images/email.png" class="icon">
                                        <span>{{item.email}}</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
    `,
    data() {
        return {
            clients:null
        };
    },
    methods:{
        get_clients() {
            ajax.get(`client`).then(res=>{
                if (res.status === 200){
                    this.clients = res.data.data;
                }
            })
        },
        delete_client(client){
            ajax.delete(`client/${client.id}`).then(res=>{
                if (res.status === 200){
                    this.get_clients();
                }
            })
        }
    },
    mounted() {
        this.get_clients();
    }
}